<template>
  <div style="border: 2px dotted lightblue;width: 800px; height: 500px;margin: 0 auto;">
    <div style="margin-top: 250px;">
      <el-upload class="upload-demo" ref="upload" action="http://localhost:3000/uploadimg" :headers='header'
        :on-preview="handlePreview" 
        :on-remove="handleRemove" 
        :file-list="fileList" 
        :auto-upload="false"
        list-type="picture" multiple 
        :on-success="
          (response, file, fileList) => {
            return handleSuccess(response, file, fileList);
          }">
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" @click="show(file)">
          <span>name:{{ file.name }}</span>
          <span style="margin-left: 15px;">size:{{ file.size }}</span>
        </div>
        <el-button slot="trigger" size="small" type="primary">选择照片</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交</el-button>
      </el-upload>
      <el-dialog :title="提示" :visible.sync="dialogVisible" :before-close="handleClose" width='30%'>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-pagination
        small
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      disabled: false,
      dialogImageUrl: '',
      header: { 'authorization': localStorage["token"] },
      total:60
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);

    },
    // httpRequest(params) {
    //   console.log(localStorage["token"]);
    //   console.log(params)//拿到上传的文件
    //   fetch("http://localhost:3000/uploadimg", {
    //     method: 'POST',
    //     body: JSON.stringify(params.file),
    //     headers: { 'authorization': localStorage["token"] }
    //   }).then(res => res.json())
    //     .then(res => {
    //       if (res.token) {
    //         alert('文件上传成功')
    //       } else {
    //         alert('文件上传失败')
    //       }
    //     })
    // },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    show(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    getpage(){
      fetch("http://localhost:3000/getpage")
      .then(res=>res.json())
      .then(res=>{
        console.log(res);
        this.total=res.length*10;
        console.log(this.total);
      })
    }
  },
  mounted(){
    this.getpage();
  }
}
</script>
